import XModifierKey from "./XModifierKey";
import { Button, Select, Flex } from "antd";

export default function () {
    return (
        <Flex gap={10} vertical>
            <Flex vertical gap={10}>
                <span>事件</span>
                <Select
                    placeholder="请选择事件"
                    allowClear
                    options={[
                        {
                            label: "鼠标事件",
                            options: mouseEvent,
                        },
                        {
                            label: "键盘事件",
                            options: keyboardEvent,
                        },
                        {
                            label: "表单事件",
                            options: formEvent,
                        },
                        {
                            label: "其他事件",
                            options: otherEvent,
                        },
                    ]}
                />
            </Flex>
            <Flex vertical gap={10}>
                <span>组合键</span>
                <XModifierKey />
            </Flex>
            <Button block type="primary">
                测试事件
            </Button>
        </Flex>
    );
}

const mouseEvent = [
    { label: "单击 click", value: "click" },
    { label: "双击 dblclick", value: "dblclick" },
    { label: "按下 mousedown", value: "mousedown" },
    { label: "松开 mouseup", value: "mouseup" },
    { label: "进入，不冒泡 mouseenter", value: "mouseenter" },
    { label: "离开，不冒泡 mouseleave", value: "mouseleave" },
    { label: "移动 mousemove", value: "mousemove" },
    { label: "进入 mouseover", value: "mouseover" },
    { label: "离开 mouseout", value: "mouseout" },
];

const keyboardEvent = [
    { label: "按下 keydown", value: "keydown" },
    { label: "按下并松开 keypress", value: "keypress" },
    { label: "松开 keyup", value: "keyup" },
];

const formEvent = [
    { label: "失去焦点 blur", value: "blur" },
    { label: "改变 change", value: "change" },
    { label: "获取焦点 focus", value: "focus" },
    { label: "输入 input", value: "input" },
];

const otherEvent = [{ label: "鼠标滚轮 wheel", value: "wheel" }];
